<script setup lang="ts">

const props = defineProps({
  modelValue:{

  },
  options: {

  }
})
const emits= defineEmits(['update:modelValue','change'])
const tabList = ref([])
tabList.value = props.options
const tabModel = ref(null)
tabModel.value = tabList.value[0].name
watch(()=>props.modelValue,()=> {
  if (props.modelValue) {
    tabList.value = props.modelValue

  }
})


const handleSelect=()=> {
  emits('update:modelValue',tabModel.value)
}


</script>

<template>
  <el-tabs v-model="tabModel" @tab-change="handleSelect">
    <el-tab-pane v-for="tab in options" :label="tab.label" :name="tab.name"></el-tab-pane>
  </el-tabs>
</template>

<style scoped lang="scss">
.selected {
  background-color: #3d8a2a;
  color: #ffffff;
}

:deep() {
  .el-calendar-day {
    padding: 0;
  }
}
</style>
